
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>
<%
    //  Object dsum=request.getAttribute("dsum");
    // System.out.println("单选题总分:"+dsum);
%>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>在线考试</title>
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
    <link href="../css/iconfont1.css" rel="stylesheet" type="text/css" />
    <link href="../css/test.css" rel="stylesheet" type="text/css" />

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }
    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="/examproject/TestSubmitServlet/truefalseansw" method="post" onsubmit="return subtest();">
                    <input type="hidden" name="ra" id="dxdaan"/>
                    <input type="hidden" name="ch" id="dxdaan2"/>
                    <input type="hidden" name="ksid" id="kid" value="${ksid}"/>
                    <input type="hidden" name="zttime" id="ksk" />
                    <div class="test_title">
                        <p class="test_time">
                            <i class="icon iconfont">&#xe6fb;</i><b class="alt-1"></b>
                        </p>
                        <font><input type="submit" id="testsbmit" name="test_jiaojuan"  value="交卷"></font>
                    </div>
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">${xlist.size()}</i><span>题，</span><span>合计</span><i
                                    class="content_fs">${dsum}</i><span>分</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <%
                                int cf=1;
                            %>
                            <c:forEach items="${xlist}" var="test">

                                <li id="te<%=cf%>">
                                    <span style="display: none;">${test.question_id}</span>
                                    <u style="display: none;">${test.question_score}</u>
                                    <div class="test_content_nr_tt">
                                        <i><%=cf%></i><span>(${test.question_score}分)</span>
                                        <font>${test.question_name}</font><b
                                            class="icon iconfont">&#xe881;</b>
                                    </div>
                                    <div class="test_content_nr_main">
                                        <ul>

                                            <li class="option">

                                                <input type="radio" class="radioOrCheck" name="ans<%=cf%>"
                                                       id="0_answer_<%=cf%>_option_1" value="A"/>


                                                <label for="0_answer_<%=cf%>_option_1">
                                                    A.
                                                    <p class="ue" style="display: inline;">${test.question_optiona}</p>
                                                </label>
                                            </li>

                                            <li class="option">

                                                <input  type="radio" class="radioOrCheck" name="ans<%=cf%>"
                                                        id="0_answer_<%=cf%>_option_2"  value="B"/>


                                                <label for="0_answer_<%=cf%>_option_2">
                                                    B.
                                                    <p class="ue" style="display: inline;">${test.question_optionb}</p>
                                                </label>
                                            </li>

                                            <li class="option">

                                                <input  type="radio" class="radioOrCheck" name="ans<%=cf%>"
                                                        id="0_answer_<%=cf%>_option_3" value="C" />


                                                <label for="0_answer_<%=cf%>_option_3">
                                                    C.
                                                    <p class="ue" style="display: inline;">${test.question_optionc}</p>
                                                </label>
                                            </li>

                                            <li class="option">

                                                <input  type="radio" class="radioOrCheck" name="ans<%=cf%>"
                                                        id="0_answer_<%=cf%>_option_4" value="D" />


                                                <label for="0_answer_<%=cf++%>_option_4">
                                                    D.
                                                    <p class="ue" style="display: inline;">${test.question_optiond}</p>
                                                </label>
                                            </li>

                                        </ul>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>

                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>多选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">${dlist.size()}</i><span>题，</span><span>合计</span><i
                                    class="content_fs">${dxnum}</i><span>分</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <%
                                int  dx=1;
                            %>
                            <c:forEach items="${dlist}" var="dlis" >
                                <li id="dx<%=dx%>">
                                    <span style="display: none">${dlis.question_id}</span>
                                    <u style="display: none">${dlis.question_score}</u>
                                    <div class="test_content_nr_tt">
                                        <i><%=dx%></i><span>(${dlis.question_score}分)</span>
                                        <font>${dlis.question_name}</font><b class="icon iconfont">&#xe881;</b>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>

                                            <li class="option2">


                                                <input type="checkbox" class="radioOrCheck" name="answer<%=dx%>"
                                                       id="1_answer_<%=dx%>_option_1" value="A"/>

                                                <label for="1_answer_<%=dx%>_option_1">
                                                    A.
                                                    <p class="ue" style="display: inline;">${dlis.question_optiona}</p>
                                                </label>
                                            </li>

                                            <li class="option2">


                                                <input type="checkbox" class="radioOrCheck" name="answer<%=dx%>"
                                                       id="1_answer_<%=dx%>_option_2" value="B"/>

                                                <label for="1_answer_<%=dx%>_option_2">
                                                    B.
                                                    <p class="ue" style="display: inline;">${dlis.question_optionb}</p>
                                                </label>
                                            </li>

                                            <li class="option2">


                                                <input type="checkbox" class="radioOrCheck" name="answer<%=dx%>"
                                                       id="1_answer_<%=dx%>_option_3" value="C"/>

                                                <label for="1_answer_<%=dx%>_option_3">
                                                    C.
                                                    <p class="ue" style="display: inline;">${dlis.question_optionc}</p>
                                                </label>
                                            </li>

                                            <li class="option2">

                                                <input type="checkbox" class="radioOrCheck" name="answer<%=dx%>"
                                                       id="1_answer_<%=dx%>_option_4" value="D"/>

                                                <label for="1_answer_<%=dx++%>_option_4">
                                                    D.
                                                    <p class="ue" style="display: inline;">${dlis.question_optiond}</p>
                                                </label>
                                            </li>

                                        </ul>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                        <div style="height: 60px;width:100%"></div>
                    </div>
                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                            <i class="icon iconfont">&#xe692;</i>答题卡
                        </h1>
                        <p class="test_time" >
                            <i class="icon iconfont">&#xe6fb;</i><b class="alt-1"></b>
                        </p>
                    </div>
                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">${xlist.size()}</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>
                                <c:forEach begin="${1}" end="${xlist.size()}" var="k">
                                    <li><a href="#te${k}">${k}</a></li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>多选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">${dlist.size()}</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>
                                <c:forEach begin="${1}" end="${dlist.size()}" var="f">
                                    <li><a href="#dx${f}">${f}</a></li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery.easy-pie-chart.js"></script>
<%--<!--时间js-->
<script src="../js/jquery.countdown.js"></script>--%>
<script>
    window.jQuery(function ($) {
        "use strict";

        /*$('time').countDown({
            with_separators: false
        });*/
        /* $('.alt-1').countDown({
             css_class: 'countdown-alt-1'
         });
         $('.alt-2').countDown({
             css_class: 'countdown-alt-2'
         });*/

    });


   /* $(function () {
        $('li.option input').click(function () {
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');

                var obj = document.querySelectorAll(".test_content_nr_main input");
                var tes={};
                for(var i=0; i<obj.length; i ++){
                    if(obj[i].checked){
                        tes[examId]=obj[i].value;
                        alert(obj[i].value)
                        localStorage.setItem(examId,obj[i].value);
                    }
                }
                console.log(tes);
            }

        });
    });*/

    /*单选*/
    /*刷新后显示原答题结果*/
    var sz=[];    //单选数组
    var dxsz=[];  //多选数组
    var statu;//考试状态
    var ds=0;
    $(function () {
        var x=localStorage.getItem("answ${ksid}");
        var ee=JSON.parse(x);
        if(ee!=null){
            for(var i=0;i<ee.length;i++){
                var cd=ee[i].id.substring(2);
                var xz = ee[i].val;
                var qid=ee[i].tid;
                var qso=ee[i].score;
                var tid = "";
                if(xz=='A'){
                    tid = "0_answer_"+cd+"_option_1";
                }
                if(xz=='B'){
                    tid = "0_answer_"+cd+"_option_2";
                }
                if(xz=='C'){
                    tid = "0_answer_"+cd+"_option_3";
                }
                if(xz=='D'){
                    tid = "0_answer_"+cd+"_option_4";
                }
                /* console.log(tid)*/
                $('#'+tid).attr('checked', 'true');
                sz.push({"id":ee[i].id,"tid":qid,"score":qso,"val":xz});
                var cardLi = $('a[href=#' + ee[i].id + ']'); // 根据题目ID找到对应答题卡
                // 设置已答题
                if (!cardLi.hasClass('hasBeenAnswer')) {
                    cardLi.addClass('hasBeenAnswer');
                }
            }
        }


        /*将已经做答的结果储存到localStorage*/
        $('li.option input').click(function () {
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var quetid=$( "#"+examId+" span").html();
            var qusco=$( "#"+examId+" u").html();
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }
            if(this.checked){
                for(var i=0;i<sz.length;i++){
                    var dd = sz[i].id;
                    if(dd==examId){
                        sz[i].val=this.value;
                        sz.splice(i,1);
                    }
                }
                sz.push({"id":examId,"tid":quetid,"score":qusco,"val":this.value});
            }
            //console.log(sz);
            var s=JSON.stringify(sz);
            localStorage.setItem("answ${ksid}",s);
        });


        /*多选*/

        //刷新取出值 放入选中对应的题目
        var dxx=localStorage.getItem("dxansw${ksid}");
        var dxee=JSON.parse(dxx)//取出的json
        var showcheck=[];
        if(dxee!=null){
            for(var i=0;i<dxee.length;i++){
                var dxid=dxee[i].id;
                var num=dxid.substring(2);
                var dxidval=dxee[i].val;
                var dxtid=dxee[i].tid;
                var qsc=dxee[i].score;
                for(var j=0;j<dxidval.length;j++){
                    if(dxidval[j]=='A'){
                        showcheck.push("1_answer_"+num+"_option_1");
                    }else if(dxidval[j]=='B'){
                        showcheck.push("1_answer_"+num+"_option_2");
                    }else if(dxidval[j]=='C'){
                        showcheck.push("1_answer_"+num+"_option_3");
                    }else  if(dxidval[j]=='D'){
                        showcheck.push("1_answer_"+num+"_option_4");
                    }
                }

                for(var h=0;h<showcheck.length;h++){
                    $('#'+showcheck[h]).attr('checked', 'true');
                    var cardLi = $('a[href=#' + dxee[i].id + ']'); // 根据题目ID找到对应答题卡
                    // 设置已答题
                    if (!cardLi.hasClass('hasBeenAnswer')) {
                        cardLi.addClass('hasBeenAnswer');
                    }
                }
                dxsz.push({"id":dxee[i].id,"tid":dxtid,"score":qsc,"val":dxee[i].val});
            }
        }

        //多选
        $('li.option2 input').click(function() {
            var dxexamId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var dxid=$("#"+dxexamId+" span").html();
            var dxsc=$("#"+dxexamId+" u").html();
            var cardLi = $('a[href=#' + dxexamId + ']');
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }
            //
            var dxval=document.querySelectorAll("#"+dxexamId+" input");
            var dxszval=[];  //选中数组
            for(var i=0;i<dxval.length;i++){
                if(dxval[i].checked){
                    dxszval.push(dxval[i].value);
                }
            }
            //未选择答案 选项卡颜色去掉
            if(dxszval.length==0){
                cardLi.removeClass('hasBeenAnswer');
            }

            //修改选中答案
            for(var i=0;i<dxsz.length;i++){
                var dd = dxsz[i].id;
                if(dd==dxexamId){   //判断id相等
                    dxsz[i].val=dxszval;
                    dxsz.splice(i,1);  //删除指定重复id
                    console.log(i+" "+dd);
                }
            }

            dxsz.push({"id":dxexamId,"tid":dxid,"score":dxsc,"val":dxszval});//放到数组里面
            console.log(dxsz);
            var dxs=JSON.stringify(dxsz);//转json字符串
            localStorage.setItem("dxansw${ksid}",dxs);//放到localStorage
            dxszval=[];//初始化
        });


        //显示倒计时
        var tin = setInterval(function(){
            var zms = localStorage.getItem("kdate${ksid}");  //得到截止时间
            var xms = new Date().getTime();    //现在时间
            var differ = zms - xms;   //相差时间
            var s,m,h;
            differ+=1000;//时间慢一秒问题
            if(differ>0){
                h = Math.floor(differ/1000/60/60%24);   //时
                m = Math.floor(differ/1000/60%60);      //分
                s = Math.floor(differ/1000%60);         //秒
                if(h<=0){
                    h="00";
                }else if(h<10){
                    h="0"+h;
                }
                if(m<=0){
                    m="00";
                }else if(m<10){
                    m="0"+m;
                }
                if(s<10){
                    s="0"+s;
                }
                $(".alt-1").html(h+":"+m+":"+s);
            }else{
                clearInterval(tin);
                ds=1;
                $("#testsbmit").click();
            }
        },100);
    });
    
    //时间未到交卷
    /*function subm(){
        var al=confirm("是否交卷？");
        if(al==true){
            var radio=localStorage.getItem("answ${ksid}");
            var checked=localStorage.getItem("dxansw${ksid}");
            $("#dxdaan").val(radio);
            $("#dxdaan2").val(checked);
            localStorage.clear();
        }else{
            return false;
        }
    }*/

   function subtest() {
      if(ds==0){
          var al=confirm("是否交卷？");
          if(al==true){
              var radio=localStorage.getItem("answ${ksid}");
              var checked=localStorage.getItem("dxansw${ksid}");
              var zttime=localStorage.getItem("startime${ksid}");
              $("#dxdaan").val(radio);
              $("#dxdaan2").val(checked);
              $("#ksk").val(zttime);
          }else{
              return false;
          }
      }else if(ds==1){
          var radio=localStorage.getItem("answ${ksid}");
          var checked=localStorage.getItem("dxansw${ksid}");
          var zttime=localStorage.getItem("startime${ksid}");

          $("#dxdaan").val(radio);
          $("#dxdaan2").val(checked);
          $("#ksk").val(zttime);
      }
   }

   /* function fasend() {
        var radio=localStorage.getItem("answ${ksid}");
        var checked=localStorage.getItem("dxansw${ksid}");
        var zttime=localStorage.getItem("startime${ksid}");


        $.post("/examproject/TestSubmitServlet/truefalseansw",
            {
                "ra":radio,
                "ch":checked,
                "ksid":${ksid},
                "zttime":zttime,
            },function(date){
            if(date=="sug"){
                location.href="/examproject/html/Score.jsp";
            }
            })
    }
*/
</script>


</body>

</html>
